import { View, Input, Text, Image, ScrollView } from '@tarojs/components';
import Taro from '@tarojs/taro';
import React from 'react';
import { connect } from 'react-redux';
import * as T from '../../types';
import './index.less';
import actions from '../../actions';
import { store2Props } from '../../selectors';
import searchImg from '@/assets/image/index/g_search.png';
import {IPLAND_OSS_HOST} from '../../../../constant';

const cateData = [
  {
    title: 'IP',
    type: 'IP',
    url: '',
  },
  {
    title: '品牌',
    type: '品牌',
    url: '',
  },
  {
    title: '卡牌',
    type: '卡牌',
    url: '',
  },
  {
    title: '周边',
    type: '周边',
    url: '',
  },
  {
    title: '手办',
    type: '手办',
    url: '',
  },
  {
    title: '潮玩潮物',
    type: '潮玩潮物',
    url: '',
  },
  {
    title: '宠物',
    type: '宠物',
    url: '',
  },
  {
    title: '植物',
    type: '植物',
    url: '',
  },
];
//@ts-ignore
actions().actions.loadReducer();
//@ts-ignore
@connect<Partial<T.IProps>, any>(store2Props, actions)
export default class Top extends React.Component<Partial<T.IProps>, any> {
  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    return (
      <View className="topFirst">
        <View className="searchBar">
          <View className="content">
            <Image
              src={searchImg}
              className="imgIcon"
              mode="widthFix"
              onClick={() => {
                // actions.init(name);
              }}
            />
            <Input
              className="searchText"
              maxlength={16}
              type="text"
              placeholderClass="placeholder"
              placeholder="搜索"
              onInput={(e) => {
                let str = '';
                if (e.detail.value) {
                  let zz = e.detail.value.replace(
                    /[^\u0020-\u007E\u00A0-\u00BE\u2E80-\uA4CF\uF900-\uFAFF\uFE30-\uFE4F\uFF00-\uFFEF\u0080-\u009F\u2000-\u201f\u2026\u2022\u20ac\r\n]/g,
                    '',
                  );
                  str = zz.replace(/[`~!@#$%^&*()=+|{}.<>/?~！@#￥……&*（）——|{}【】‘；：”“'。，、？':;']/g, '');
                }
                this.setState({
                  name: str,
                });
              }}
              onConfirm={(e) => {
                // actions.init(e.detail.value);
              }}
            />
          </View>
          <View
            className="btn"
            onClick={() => {
              Taro.navigateTo({ url: '/pages/package-I/shop/all-list/index' })
            }}
          >
            <Image className="cateImg" src={`${IPLAND_OSS_HOST}shop/cateText.png`} mode="heightFix" />
          </View>
        </View>
        <View className="czCard">
          <ScrollView className="scroll" scrollX>
            {cateData.map((item, index) => {
              return <View className="itemBox">
                <View
                  className="item"
                  onClick={() => {
                  }}
                >
                  <Image className="img" src={`${IPLAND_OSS_HOST}shop/headPic.png`} mode="heightFix" />
                  <Text className="title">{item.title}</Text>
                </View>
              </View>
            })}
          </ScrollView>
        </View>
      </View>
    );
  }
}

//create by moon https://github.com/creasy2010/moon
